import { defineComponent, ref, reactive, computed } from 'vue'
import { NTabs, NTabPane, NEmpty } from 'naive-ui'
import DynamicComponent from './editModal/index'
import EditRule from './editRule/EditRule'
import BaseEdit from './base/BaseEdit'
import ApiEdit from './base/ApiEdit'
import pageStyle from '../styles/index.module.scss'
import type { PropType } from 'vue'
import type { questionSideListState, addEditState, basicState } from '@/types/baseConfig'
export default defineComponent({
  props: {
    compData: {
      type: Object as PropType<questionSideListState>,
      default: () => {
        return {}
      }
    },
    addEdit: {
      type: Object as PropType<addEditState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['save', 'basicChange', 'addEditChange'],
  setup(props, { emit, expose }) {
    const showTab = ref<boolean>(true)
    const tabCurren = ref<number>(0)
    const tabsList = reactive([
      {
        label: '表单'
      },
      {
        label: '表单'
      },
      {
        label: '接口'
      }
    ])
    const handSave = (e: questionSideListState) => {
      emit('save', e)
    }

    const basicChange = (e: basicState) => {
      emit('basicChange', e)
    }

    const addEditChange = (e: addEditState) => {
      emit('addEditChange', e)
    }

    const tabCurrenChange = (e: number) => {
      tabCurren.value = e
    }

    const movingRightWidth = computed(() => {
      if (tabCurren.value === 2) {
        return '450px'
      }
      return '350px'
    })

    expose({
      tabCurrenChange
    })
    return () => (
      <>
        <div class={pageStyle.movingRight} style={{ width: movingRightWidth.value }}>
          {tabCurren.value === 0 ? (
            <NTabs class="tabs" default-value="oasis" justify-content="space-evenly" type="line">
              <NTabPane class="tabs-item" name="oasis" tab="组件设置">
                <div class="has-scrollbar">
                  <div class="nano-content">
                    {props.compData.type ? (
                      <DynamicComponent
                        component={props.compData.type}
                        comp-data={props.compData}
                        onSave={handSave}
                      />
                    ) : (
                      <NEmpty description="点击或拖拽添加组件" />
                    )}
                  </div>
                </div>
              </NTabPane>
              <NTabPane class="tabs-item" name="two" tab="规则验证">
                <div class="has-scrollbar">
                  <EditRule comp-data={props.compData} onSave={handSave} />
                </div>
              </NTabPane>
              <NTabPane class="tabs-item" name="three" tab="事件属性">
                <div class="pt10">
                  <NEmpty description="开发中,敬请期待" />
                </div>
              </NTabPane>
            </NTabs>
          ) : tabCurren.value === 1 ? (
            <BaseEdit comp-data={props.addEdit.basic} onSave={basicChange} />
          ) : (
            <ApiEdit comp-data={props.addEdit} onSave={addEditChange} />
          )}
        </div>
        <div class={pageStyle.movingTbas} style={{ width: showTab.value ? '80px' : '0' }}>
          {tabsList.map((item: any, index: number) => (
            <div
              class={`tab ${tabCurren.value === index ? 'tab-active' : ''}`}
              onClick={() => (tabCurren.value = index)}
            >
              {item.label}
            </div>
          ))}
        </div>
        <div
          class="collpa"
          style={{ right: showTab.value ? '70px' : '-12px' }}
          onClick={() => (showTab.value = !showTab.value)}
        >
          <i class={`esayIcon ${showTab.value ? 'esayIcon-you' : 'esayIcon-zuo'}`}></i>
        </div>
      </>
    )
  }
})
